<template>
  <!-- 试卷列表 -->
  <div id="examination-list" class="jx-content">
    <!-- 开始考试弹出框 -->
    <el-dialog @close="closeDialog" :close-on-click-modal="false" class="dialog-start-exam" title="开始考试" :visible.sync="dialogStartExam" width="500px">
      <div class="dialog-content">

        <div class="start-exam-switch">
          <!-- 手动选班 -->
          <el-form :inline="true" :model="dialogStartExamForm" ref="dialogStartExamForm" class="start-exam-form">
            <el-form-item style="margin-right:30px;" label="手动选班">
              <el-switch v-model="dialogStartExamSwitch"></el-switch>
            </el-form-item>

            <el-form-item v-if="!dialogStartExamSwitch && classRowData.name">
              <div :title="classRowData.name + '班级'" class="start-exa-title clearfix">
                <div class="fl beyond-hiding" style="max-width:140px;">{{ classRowData.name }}班级</div>
                <span class="fl c-btn-blue fs14" style="color:#999999; font-size:12px;">（默认班级）</span>
              </div>
            </el-form-item>

            <el-form-item label="班级" v-if="dialogStartExamSwitch">
                <ele-multi-cascader
                    class="elem-multi-casader"
                    :options="classList"
                    collapse-tags
                    selectChildren
                    v-model="classSelectedOptions"
                    @change="handleChange"
                >
                </ele-multi-cascader>
              <!-- <el-cascader style="margin-top:-7px;" class="cascader"
              :options="classList"
              expand-trigger="hover"
              :props="cascaderconfig"
              v-model="classSelectedOptions"
              @change="classSelectChange"></el-cascader> -->
            </el-form-item>
            <!-- <el-form-item label="年份" v-if="dialogStartExamSwitch">
              <el-date-picker v-model="dialogStartExamForm.year" type="year" placeholder="选择年"></el-date-picker>
            </el-form-item>
            <el-form-item label="班级" v-if="dialogStartExamSwitch">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="(item,index) in dialogStartExamForm.options" :key="index" :label="item.label"></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
          <!-- 代码查重 -->
          <el-form :inline="true" :model="dialogStartExamForm" ref="dialogStartExamForm" class="start-exam-form">
            <el-form-item style="margin-right:30px;" label="实验查重">
              <el-switch v-model="dialogRepeatSwitch"></el-switch>
            </el-form-item>
            <el-form-item class="xiangsidu" label="报告相似度高于" v-if="dialogRepeatSwitch">
              <el-select v-model.number="repeatNum" placeholder="请选择">
                <el-option v-for="item in optionsRepeat" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-tooltip class="item" effect="dark" content="提示：设置实验考试学生提交的word版实验报告查重比率，系统会自动识别出高于此比率的实验报告。" placement="bottom">
                <i style="margin-left:10px;" class="iconfont icon-wenti-m c-blue fs18"></i>
              </el-tooltip>
              <!-- <el-input v-model="repeatNum"></el-input> -->
            </el-form-item>
          </el-form>
          <!-- 新增考试方式 -->
          <el-form :inline="true" class="start-exam-form">
            <el-form-item style="margin-right:30px;" label="考试方式">
                <el-radio v-model="exam.endType" label="1">长时段考试</el-radio>
                <el-radio v-model="exam.endType" label="2">固定时段考试</el-radio>
            </el-form-item>
            <el-form-item v-if="exam.endType == 1" style="margin-right:30px;" label="考试结束时间">
                <el-date-picker
                    class="long-picker"
                    v-model="exam.endTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择考试结束时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item v-if="exam.endType == 2" style="margin-right:30px;" label="考试开始时间">
                <el-date-picker
                    class="long-picker"
                    v-model="exam.startTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择考试开始时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item v-if="exam.endType == 2" style="margin-right:10px;" label="考试时长">
                <el-input
                    @keyup.native="provingEx(exam, 'timeLength')"
                    v-model="exam.timeLength"
                ></el-input>
            </el-form-item>
            <el-form-item v-if="exam.endType == 2" label="分钟" class="form-left"></el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="exam.endType == 1" class="button-style" @click="startExamSubmit">开始考试</el-button>
        <el-button v-else class="button-style" @click="startExamSubmit">保存设置</el-button>
      </span>
    </el-dialog>
    <!-- 导入试题弹出框 -->
    <div class="btn-group fr" style="padding:0">
      <el-form :inline="true">
        <el-form-item>
          <router-link class="button-style" to="/Teaching/MyCourses/Examination/TestPaper/TopicModel">生成试卷</router-link>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="resContent" style="width: 100%">
      <el-table-column type="index" label="序号" width="120"></el-table-column>
      <el-table-column prop="paperName" label="试卷名称">
        <template slot-scope="scope">
          <div class="beyond-hiding" :title="scope.row.paperName">{{ scope.row.paperName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="className" label="考试班级">
        <template slot-scope="scope">
          <div v-if="scope.row.className" class="beyond-hiding" :title="scope.row.className">{{ scope.row.className }}</div>
          <div v-else style="color:#ccc;">—</div>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="班级年级" width="80">
        <template slot-scope="scope">
          <div v-if="scope.row.grade" class="beyond-hiding" :title="scope.row.grade">{{ scope.row.grade }}</div>
          <div v-else style="color:#ccc;">—</div>
        </template>
      </el-table-column>
      <el-table-column prop="paperStatusMessage" label="状态"></el-table-column>
      <el-table-column prop="time" label="试卷时长" width="80">
        <template slot-scope="scope">
          <div v-if="scope.row.time" class="beyond-hiding" :title="scope.row.time">{{ scope.row.time }}分钟</div>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="考试开始时间" width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.startTime" :title="scope.row.startTime">{{ scope.row.startTime }}</div>
          <div v-else style="color:#ccc;">—</div>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="考试结束时间" width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.endTime" :title="scope.row.endTime">{{ scope.row.endTime }}</div>
          <div v-else style="color:#ccc;">—</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <div class="table-button">
            <!--paperStatus 1未考试 2正在考试-->
            <el-button :class="{'btn-disabled':scope.row.paperStatus == 2}" :disabled="scope.row.paperStatus == 2" v-if="scope.row.paperStatus === 2 || scope.row.paperStatus === 3" @click="marking(scope.row)" type="text" size="small">试题审批</el-button>
            <el-button :disabled="scope.row.paperStatus == 3" v-if="scope.row.paperStatus === 4" @click="marking(scope.row)" type="text" size="small">答题历史</el-button>
            <el-button v-if="scope.row.paperStatus == 1" @click="startExamShow(scope.row)" type="text" size="small">考试设置</el-button>
            <span style="color:#dedede; padding:0 10px;">|</span>
            <el-button @click="watchExam(scope.row.paperId)" type="text" size="small">查看试卷</el-button>
            <span style="color:#dedede; padding:0 10px;">|</span>
            <el-button :class="{'btn-disabled':scope.row.paperStatus > 1}" @click="delExam(scope.row.paperId,scope.row.paperStatus)" type="text" size="small">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="resData.pageNum" :page-size="resData.pageSize" :total="resData.total" layout="total, prev, pager, next, jumper"></el-pagination>

  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
export default {
  data() {
    return {
      //新增考试方式
      exam:{
          endType:"1",
          //1
          endTime:'',
          //2
          startTime:'',
          timeLength:'',
      },
      optionsRepeat: [
        {
          value: 90,
          label: "90%"
        },
        {
          value: 80,
          label: "80%"
        },
        {
          value: 70,
          label: "70%"
        },
        {
          value: 60,
          label: "60%"
        },
        {
          value: 50,
          label: "50%"
        },
        {
          value: 40,
          label: "40%"
        },
        {
          value: 30,
          label: "30%"
        },
        {
          value: 20,
          label: "20%"
        },
        {
          value: 10,
          label: "10%"
        }
      ],
      courseId: "",
      //级联选中数组
      classSelectedOptions: [],
      //级联列表
      classList: [],
      classList1: [
        {
          id: 1,
          name: "2019",
          defaultedClass: true,
          children: [
            { id: 29, name: "我爱你", grade: "2019", defaultedClass: true }
          ]
        },
        {
          id: 2,
          name: "2018",
          defaultedClass: false,
          children: [
            {
              id: 14,
              name: "李欣测试班级1",
              grade: "2018",
              defaultedClass: false
            }
          ]
        },
        {
          id: 3,
          name: "2017",
          defaultedClass: false,
          children: [
            {
              id: 13,
              name: "李欣测试班级",
              grade: "2017",
              defaultedClass: false
            }
          ]
        },
        {
          id: 4,
          name: "2015",
          defaultedClass: false,
          children: [
            { id: 21, name: "121", grade: "2015", defaultedClass: false },
            { id: 10, name: "111", grade: "2015", defaultedClass: false },
            {
              id: 24,
              name: "李欣添加班级",
              grade: "2015",
              defaultedClass: false
            },
            { id: 16, name: "123", grade: "2015", defaultedClass: false },
            { id: 17, name: "123123", grade: "2015", defaultedClass: false },
            { id: 19, name: "123123123", grade: "2015", defaultedClass: false },
            { id: 20, name: "111111", grade: "2015", defaultedClass: false },
            { id: 11, name: "2222", grade: "2015", defaultedClass: false },
            { id: 12, name: "22223", grade: "2015", defaultedClass: false },
            { id: 25, name: "1李欣", grade: "2015", defaultedClass: false },
            { id: 26, name: "1李欣1", grade: "2015", defaultedClass: false },
            { id: 22, name: "10", grade: "2015", defaultedClass: false }
          ]
        }
      ],
      //级联设置
      cascaderconfig: {
        value: "id",
        label: "name"
      },
      //开始考试弹出框Start the exam
      dialogStartExam: false,
      //手动选班开关
      dialogStartExamSwitch: false,
      //代码查重
      dialogRepeatSwitch: true,
      //代码查重相似度
      repeatNum: 90,
      value: 0,
      //form
      dialogStartExamForm: {
        year: "2018",
        options: [
          {
            key: 1,
            value: "一班"
          },
          {
            key: 2,
            value: "二班"
          }
        ]
      },
      //导入试题弹出框
      dialogImportQuestions: false,
      dialogImportQuestionsRadio: "1",
      searchForm: {
        //当前页
        pageNum: 1
      },
      currentPage: 10,
      resData: [],
      resContent: [],

      //点击开始考试拿出数据
      rowData: [],
      //班级
      classRowData: [],
      defaultedClassId: ""
    };
  },
  watch: {
    dialogStartExamSwitch(val) {
      if (val) {
        // console.log("开");
        // if (this.classSelectedOptions.length) {
        //   this.classRowData.id = this.classSelectedOptions[1];
        // } else {
        //   this.classRowData.id = "";
        // }
      } else {
        this.classSelectedOptions = [];
        // this.classRowData.id = this.defaultedClassId;
        // // console.log("关");
        // // console.log(this.defaultedClassId);
      }
    //   console.log(this.classRowData, 122);
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.courseId = this.$localstorage.getLocalStorage("setCourseId");
      this.getCourseId();
      this.getList();
      //获取班级级联
      this.getClassList();
      //获取默认班级
      this.getDefaultClass();
    },
    closeDialog(){
        console.log(12345);
    },
    getCourseId() {
      this.courseId = this.$localstorage.getLocalStorage("setCourseId");
    },
    //清空考试弹窗
    clearExam(){
        let exam = this.exam;
        exam.endType = '1';
        exam.endTime = '';
        exam.startTime = '';
        exam.timeLength = '';
        this.dialogStartExamSwitch = false;
        this.classSelectedOptions = [];
        //是否进行实验报告查重
        this.dialogRepeatSwitch = true;
        //实验报告查重百分比
        this.repeatNum = 90;
    },
    //考试设置回显
    getExamDtails(paperId) {
      var that = this;
      this.clearExam();
      console.log(this.$localstorage.getLocalStorage("setCourseId"),888);
      let courseId = this.$localstorage.getLocalStorage("setCourseId");
      axios
        .get(
          `/tes/course/${courseId}/course-test/paper/${paperId}/detail`
        )
        .then(function(res) {
          if (res.status === 200) {
            if (res.data.code === 200) {
                let data = res.data.data;
                if(data){
                  let exam = that.exam;
                  exam.endType = data.endType + '';
                  exam.endTime = data.endTime;
                  exam.startTime = data.startTime;
                  exam.timeLength = data.timeLength;
                  if(data.isDefaultClass){
                      that.dialogStartExamSwitch = false;
                  }
                  else{
                      that.dialogStartExamSwitch = true;
                      that.classSelectedOptions = data.classIds;
                  }
                  //是否进行实验报告查重
                  that.dialogRepeatSwitch = data.checkReportDuplicate;
                  //实验报告查重百分比
                  that.repeatNum = data.reportDuplicatePercent;
                }
                console.log(data,5344);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //获取默认班级
    getDefaultClass() {
      var that = this;
      console.log(this.$localstorage.getLocalStorage("setCourseId"),888)
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/default-class"
        )
        .then(function(res) {
        //   console.log("成功1");
        //   console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //列表赋值
              that.classRowData = res.data.data;
              console.log(res.data.data,556677);
              that.defaultedClassId = that.classRowData.id;
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //获取班级级联列表
    getClassList() {
      var that = this;
      let courseId = this.$localstorage.getLocalStorage("setCourseId");
      axios
        // .get("/tes/course/" + that.courseId + "/course-test/paper/class-list")
        .get(
            `/tes/course/${courseId}/course-test/paper/class-list-multiple`
        )
        .then(function(res) {
        //   console.log("成功1");
        //   console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
                console.log(res.data.data,556789);
              that.classList = res.data.data;
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    handleChange(){

    },
    //级联改变触发
    classSelectChange() {
      this.classRowData.id = this.classSelectedOptions[1];
    //   console.log(this.classRowData);
    },
    //获取试卷列表
    getList() {
      var that = this;
      axios
        .get("/tes/course/" + that.courseId + "/course-test/paper", {
          params: that.searchForm
        })
        .then(function(res) {
        //   console.log("成功1");
        //   console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //列表赋值
              that.resData = res.data.data;
              that.resContent = res.data.data.content;
            //   console.log(that.resData, 112233);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //删除试题
    delExam(id, paperStatus) {
      var that = this;
      if (paperStatus > 1) {
        return;
      }
      that
        .$confirm("是否删除试卷?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          axios
            .delete("/tes/course/" + that.courseId + "/course-test/paper/" + id)
            .then(function(res) {
            //   console.log("成功1");
            //   console.log(res);
              if (res.status === 200) {
                if (res.data.code === 200) {
                  that.$message({
                    message: "删除成功",
                    type: "success"
                  });
                  that.getList();
                } else {
                  that.$message({
                    message: res.data.message,
                    type: "error"
                  });
                }
              }
            })
            .catch(function(err) {
              if (err.response) {
                console.log(err.response);
              }
            });
        })
        .catch(() => {});
    },
    //输入验证 键盘抬起事件 限制input框只能输入正整数
    provingEx(item, prop) {
      let that = this;
      //限制输入数字
      console.log(item[prop], 55);
      let reg = /^[0-9]+$/;
      let isInt = reg.test(item[prop]);
      console.log(isInt, 66);
      if (!isInt) {
        item[prop] = "";
        console.log(item[prop], 77);
        that.$message.warning("只能输入数字");
      }
      //限制不能大于120
      let isQuesNum = item[prop] > 300 || item[prop] < 1;
      if (isQuesNum) {
        item[prop] = "";
        that.$message.warning("考试时间为1-300分钟");
      }
    }, //输入验证 键盘抬起事件 限制input框只能输入正整数
    //弹出层查重后开始考试
    startExamSubmit() {
      var that = this;
      let rowData = that.rowData;
      let classRowData = that.classRowData;
      let exam = that.exam;
      let classIds = [];
      if(this.dialogStartExamSwitch){
          classIds = this.classSelectedOptions;
      }
      else{
          classIds.push(this.defaultedClassId);
      }

      //发送数据之前判断班级id不能为空
      if (classRowData.id === "") {
        that.$message({
          message: "请选择班级",
          type: "warning"
        });
        return;
      }

      //发送数据
      let reqStartExData = {
        //班级id
        // classId: classRowData.id,
        classIds:classIds,
        //是否进行实验报告查重
        checkReportDuplicate: that.dialogRepeatSwitch,
        //实验报告查重百分比
        reportDuplicatePercent: that.repeatNum,

        //新增考试方式
        endType:exam.endType,
        endTime:exam.endTime,
        startTime:exam.startTime,
        timeLength:exam.timeLength,
      };
      console.log(reqStartExData,234);
      that.dialogStartExam = false;
      axios
        .post(
          "/tes/course/" +
            that.courseId +
            "/course-test/paper/" +
            rowData.paperId +
            "/test",
          reqStartExData
        )
        .then(function(res) {
        //   console.log("成功1");
        //   console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "添加考试成功",
                type: "success"
              });
              that.getList();
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //点击列表的开始考试
    startExamShow(row) {
      let that = this;
      this.getExamDtails(row.paperId);
      console.log(row,22222);
      that.rowData = row;
      that.dialogStartExam = true;
    },
    //查看试卷
    watchExam(paperId) {
      let that = this;
      //本地存储
      let storage = window.localStorage;
      storage.setItem("paperId", paperId);
      //新窗口打开
      let routerData = that.$router.resolve({
        path: `/PreviewTestPaperWatch/`
      });
      window.open(routerData.href, "_blank");
    },
    //试题审批
    marking(row) {
    //   console.log(row, 1);
      let that = this;
      that.$router.push({
        path: `TeacherMarkingList/`,
        query: {
          paperId: row.paperId
        }
      });
    },
    handleSizeChange() {},
    //翻页
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    //编辑实验环境弹出关闭
    dialogImportQuestionsClose() {},
    //编辑实验环境弹出确定
    dialogImportQuestionsSubmit() {}
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#examination-list {
  width: 1200px;
  margin: 0px auto 30px;
  //yx添加样式
  box-shadow:0px 0px 0px;
  border-radius:none;
  .xiangsidu {
    input {
      width: 80px;
    }
  }
  .long-picker.el-date-editor.el-input, .long-picker.el-date-editor.el-input__inner{
      width:238px;
      .el-input__inner{
          width:238px;
      }
  }
  .dialog-start-exam {
    .el-dialog__body {
      padding-bottom: 0;
    }
    .dialog-content {
      padding: 0 30px;
      .start-exam-form {
      }
      .start-exa-title {
        font-size: 14px;
        font-weight: bold;
        color: #474747;
        .c-red {
          font-size: 14px;
          font-weight: normal;
          margin-left: 10px;
        }
      }
      .start-exam-switch {
        margin: 26px 0;
        padding-left: 10px;
        > span {
          font-size: 16px;
          margin-right: 4px;
        }
        .el-switch {
          vertical-align: sub;
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
}
</style>
